<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/taglib.jsp" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

    <title>聚人消费网络有限公司</title>
    <!--[if IE 8]>
    <script type='text/javascript' src='${ctx}/js/excanvas.js'></script>
    <link rel="stylesheet" href="${ctx}/css/IEfix.css" type="text/css" media="screen"/>
    <![endif]-->

    <!--[if IE 7]>
    <script type='text/javascript' src='${ctx}/js/excanvas.js'></script>
    <link rel="stylesheet" href="${ctx}/css/IEfix.css" type="text/css" media="screen"/>
    <![endif]-->
    <link type="text/css" href="${ctx}/css/style.css" rel="stylesheet"/>
    <!-- the layout css file -->
    <link type="text/css" href="${ctx}/css/jquery.cleditor.css" rel="stylesheet"/>

    <script type='text/javascript' src='${ctx}/js/jquery-1.4.2.min.js'></script>
    <!-- jquery library -->
    <script type='text/javascript' src='${ctx}/js/jquery-ui-1.8.5.custom.min.js'></script>
    <!-- jquery UI -->
    <script type='text/javascript' src='${ctx}/js/cufon-yui.js'></script>
    <!-- Cufon font replacement -->
    <script type='text/javascript' src='${ctx}/js/colaboratelight_400.font.js'></script>
    <!-- the Colaborate Light font -->
    <script type='text/javascript' src='${ctx}/js/easytooltip.js'></script>
    <!-- element tooltips -->
    <script type='text/javascript' src='${ctx}/js/jquery.tablesorter.min.js'></script>
    <!-- tablesorter -->

    <script type="text/javascript" src="${ctx}/js/jquery.validate.js"></script>
    <script type='text/javascript' src='${ctx}/js/visualize.jquery.js'></script>
    <!-- visualize plugin for graphs / statistics -->
    <script type='text/javascript' src='${ctx}/js/iphone-style-checkboxes.js'></script>
    <!-- iphone like checkboxes -->
    <script type='text/javascript' src='${ctx}/js/jquery.cleditor.min.js'></script>
    <!-- wysiwyg editor -->

    <script type='text/javascript' src='${ctx}/js/custom.js'></script>
    <!-- the "make them work" script -->

    <script type="text/javascript">
        function showTipDialog() {
            jQuery('#tip').dialog({
                autoOpen:false,
                width:650,
                buttons:{
                    "确定":function () {
                        jQuery(this).dialog("close");
                    }
                }
            });
            jQuery('#tip').dialog('open');
        }
         function checkDelete(count , url){
             if(count!=0){
                 showTipDialog();
             }else{
                 window.location.href = url;
             }
         }
        function showDialog() {
            jQuery('#dialog').dialog({
                autoOpen:false,
                width:650,
                buttons:{
                    "提交":function () {

                        var name = jQuery("#name").val();
                        if (name == "") {
                            jQuery("#nameTip").attr("class", "validate_error");
                        } else {
                            document.getElementById("frm").submit();
                            jQuery(this).dialog("close");
                        }
                    },
                    "取消":function () {
                        jQuery(this).dialog("close");
                    }
                }
            });
            jQuery('#dialog').dialog('open');
        }
        function showSubCatalogDialog(id) {
            jQuery("#catalogId").val(id);
            jQuery('#subCatalogDialog').dialog({
                autoOpen:false,
                width:650,
                buttons:{
                    "提交":function () {
                        var name = jQuery("#subCatalog").val();
                        if (name == "") {
                            jQuery("#subCatalogTip").attr("class", "validate_error");
                        } else {
                            document.getElementById("subCatalogfrm").submit();
                            jQuery(this).dialog("close");
                        }
                    },
                    "取消":function () {
                        jQuery(this).dialog("close");
                    }
                }
            });
            jQuery('#subCatalogDialog').dialog('open');
        }
        function showEditNameDialog(name, id, type) {
            jQuery("#name1").val(name);
            jQuery("#id").val(id);
            jQuery('#dialog1').dialog({
                autoOpen:false,
                width:650,
                buttons:{
                    "提交":function () {

                        var name = jQuery("#name1").val();
                        if (name == "") {
                            jQuery("#nameTip1").attr("class", "validate_error");
                        } else {
                            document.getElementById("frm1").action = "${ctx}/" + type + "/updateAction";
                            document.getElementById("frm1").submit();
                            jQuery(this).dialog("close");
                        }
                    },
                    "取消":function () {
                        jQuery(this).dialog("close");
                    }
                }
            });
            jQuery('#dialog1').dialog('open');
        }
        function showAction(obj) {
            var li = jQuery(obj);
            if (li.find("p").length == 4) {
                var p = li.find("p").get(3);
                p.style.display = "block";
            }
        }
        function hideAction(obj) {
            var li = jQuery(obj);
            if (li.find("p").length == 4) {
                var p = li.find("p").get(3);
                p.style.display = "none";
            }
        }
    </script>
    <meta charset="UTF-8">
</head>

<body>

<div id="container">
    <div id="bgwrap">

        <div id="primary_left">

            <div id="logo">
                <a href="#" title="Dashboard"><img src="${ctx}/assets/LogoMaker.png" width="220" height="48"
                                                   alt=""/></a>
            </div>
            <!-- logo end -->

            <div id="menu"> <!-- navigation menu -->
                <ul>
                    <li><a href="${ctx}/forward/index/html" class="dashboard"><img
                            src="${ctx}/assets/icons/small_icons_3/dashboard.png" alt=""/><span
                            class="current">首页</span></a></li>
                    <li><a href="${ctx}/user/userManager" class="dashboard"><img
                            src="${ctx}/assets/icons/small_icons_3/users.png" alt=""/><span
                            class="current">用户管理</span></a></li>
                    <li class="current"><a href="${ctx}/catalog" class="dashboard"><img
                            src="${ctx}/assets/icons/small_icons_3/media.png" alt=""/><span
                            class="current">产品管理</span></a></li>
                    <li class="fade_hover tooltip" title="返回网站主页">
                        <a href="${ctx}">
                            <img src="${ctx}/assets/icons/dashboard/back.png" alt=""/>
                            <span>返回网站主页</span>
                        </a>
                    </li>
                </ul>
            </div>
            <!-- navigation menu end -->
        </div>
        <!-- sidebar end -->
        <div id="primary_right">
            <div class="inner" style="width: 78%;">


                <ul class="dash">


                    <li class="fade_hover tooltip" title="添加产品分类">
                        <a href="#" onclick="showDialog();">
                            <img src="${ctx}/assets/icons/dashboard/photos.png" alt=""/>
                            <span>添加产品分类</span>
                        </a>
                    </li>

                    <%--<li class="fade_hover tooltip" title="Website Statistics">--%>
                    <%--<a href="#">--%>
                    <%--<img src="${ctx}/assets/icons/dashboard/81.png" alt=""/>--%>
                    <%--<span>统计</span>--%>
                    <%--</a>--%>
                    <%--</li>--%>


                    <li class="fade_hover tooltip " title="退出系统">
                        <a href="${ctx}/user/logout">
                            <img src="${ctx}/assets/icons/dashboard/118.png" alt=""/>
                            <span>注销</span>
                        </a>
                    </li>
                </ul>
                <!-- end dashboard items -->

                <div id="dialog" title="添加产品分类" style="display: none;">
                    <form action="${ctx}/catalog/addAction" method="post" id="frm">
                        <input name="token" type="hidden" value="${token}">
                        <fieldset>
                            <p>
                                <label>分类名称：</label>
                                <input class="sf" name="name" type="text" id="name"
                                       value=""/>
                                <span class="field_desc" id="nameTip">请输入分类名称</span>
                            </p>
                        </fieldset>
                    </form>
                </div>

                <div id="tip" title="提示!" style="display: none;">
                    <p>对不起，删除失败！分类不为空！请先删除子分类或产品！</p>
                </div>

                <div id="dialog1" title="修改名称" style="display: none;">
                    <form action="" method="post" id="frm1">
                        <input id="id" name="id" type="hidden">
                        <input name="token" type="hidden" value="${token}">
                        <fieldset>
                            <p>
                                <label>分类名称：</label>
                                <input class="sf" name="name" type="text" id="name1"
                                       value=""/>
                                <span class="field_desc" id="nameTip1">请输入分类名称</span>
                            </p>
                        </fieldset>
                    </form>
                </div>

                <div id="subCatalogDialog" title="添加子分类" style="display: none;">
                    <form action="${ctx}/album/addAction" method="post" id="subCatalogfrm">
                        <input name="token" type="hidden" value="${token}">
                        <fieldset>
                            <p>
                                <label>分类名称：</label>
                                <input class="sf" name="name" type="text" id="subCatalog"
                                       value=""/>
                                <input name="catalogId" id="catalogId" type="hidden">
                                <span class="field_desc" id="subCatalogTip">请输入分类名称</span>
                            </p>
                        </fieldset>
                    </form>
                </div>

                <div class="clearboth"></div>
                <c:if test="${success!=null}">
                    <div class="notification success">
                        <span></span>

                        <div class="text">
                            <p><strong>成功!</strong> ${success}</p>
                        </div>
                    </div>
                </c:if>
                <c:if test="${error!=null}">
                    <div class="notification error">
                        <span></span>

                        <div class="text">
                            <p><strong>错误!</strong> ${error}</p>
                        </div>
                    </div>
                </c:if>
                <hr/>
                <span style="font-size: 28px;font-weight: bold;">产品管理</span>
                <table class="normal tablesorter">
                    <thead>
                    <tr>
                        <th>Select</th>
                        <th>No</th>
                        <th>顶级分类</th>
                        <th>子分类</th>
                        <th>产品数量</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <c:forEach var="catalog" items="${catalogList}">
                        <c:set var="number" scope="page" value="0"/>
                        <tr class="odd">
                            <td><input type="checkbox" checked="checked" class="iphone"/></td>
                            <td>${catalog.id}</td>
                            <td>${catalog.name}</td>
                            <td></td>
                            <td>
                                <c:forEach var="album" items="${catalog.albums}">
                                    <c:if test="${album.imagesList!=null}">
                                        <c:set var="number" value="${number + fn:length(album.imagesList)}"/>
                                    </c:if>
                                </c:forEach>
                                    ${number}
                            </td>
                            <td>
                                <a href="javascript:showEditNameDialog('${catalog.name}' , '${catalog.id}','catalog')"
                                   title="编辑分类" class="tooltip table_icon"><img
                                        src="${ctx}/assets/icons/actions_small/pencil.png" alt=""/></a>
                                <a href="javascript:showSubCatalogDialog(${catalog.id});" title="添加子分类"
                                   class="tooltip table_icon"><img
                                        src="${ctx}/assets/icons/actions_small/preferences.png" alt=""/></a>
                                <a href="javascript:checkDelete('${number}','${ctx}/catalog/deleteCatalog/${catalog.id}/${token}')" title="删除" class="tooltip table_icon"><img
                                        src="${ctx}/assets/icons/actions_small/trash.png" alt=""/></a>
                            </td>
                        </tr>
                        <c:forEach var="album" items="${catalog.albums}">
                            <tr>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td><a style="text-decoration: none" href="${ctx}/image/${album.id}">${album.name}</a>
                                </td>
                                <td>
                                    ${fn:length(album.imagesList)}
                                </td>
                                <td>
                                    <a href="javascript:showEditNameDialog('${album.name}' , '${album.id}','album')"
                                       title="编辑子分类" class="tooltip table_icon"><img
                                            src="${ctx}/assets/icons/actions_small/pencil.png" alt=""/></a>
                                    <a href="${ctx}/image/upload/${album.id}" title="添加产品"
                                       class="tooltip table_icon"><img
                                            src="${ctx}/assets/icons/actions_small/preferences.png" alt=""/></a>
                                    <a href="javascript:checkDelete('${fn:length(album.imagesList)}','${ctx}/album/deleteAlbum/${album.id}/${token}')" title="删除"
                                       class="tooltip table_icon"><img
                                            src="${ctx}/assets/icons/actions_small/trash.png" alt=""/></a>
                                </td>
                            </tr>
                        </c:forEach>
                    </c:forEach>
                    </tbody>
                </table>


            </div>
            <!-- inner -->
        </div>
        <!-- primary_right -->
    </div>
    <!-- bgwrap -->
</div>
<!-- container -->
</body>
</html>